
{% extends '__base__.html' %}
{% block title %}{{ blog.name }}{% endblock %}
{% block beforehead %}
<script>
var comment_url = '/api/blogs/{{ blog.id }}/addcomment';
$(function () {
    var $form = $('#form-comment');
    $form.submit(function (e) {
        e.preventDefault();
        $form.showFormError('');
        var content = $form.find('textarea').val().trim();
        if (content==='') {
            return $form.showFormError('请输入评论内容！');
        }
        $form.postJSON(comment_url, { content: content }, function (err, result) {
            if (err) {
                return $form.showFormError(err);
            }
            refresh();
        });
    });
});
</script>
{% endblock %}

{% block content %}
    <div class="uk-width-medium-3-4">
        <article class="uk-article">
            <h2>{{ blog.name }}</h2>
            <p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>
            <p>{{ blog.html_content|safe }}</p>
        </article>
        <hr class="uk-article-divider">



    {% if __user__ %}

        <h3>发表评论</h3>



        <article class="uk-comment">

            <header class="uk-comment-header">

                <img class="uk-comment-avatar uk-border-circle" width="50" height="50" src="{{ __user__.image }}">

                <h4 class="uk-comment-title">{{ __user__.name }}</h4>

            </header>

            <div class="uk-comment-body">

                <form id="form-comment" class="uk-form">

                    <div class="uk-alert uk-alert-danger uk-hidden"></div>

                    <div class="uk-form-row">

                        <textarea rows="6" placeholder="说点什么吧" style="width:100%;resize:none;"></textarea>

                    </div>

                    <div class="uk-form-row">

                        <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-comment"></i> 发表评论</button>

                    </div>

                </form>

            </div>

        </article>



        <hr class="uk-article-divider">

    {% endif %}



        <h3>最新评论</h3>



        <ul class="uk-comment-list">

            {% for comment in comments %}

            <li>

                <article class="uk-comment">

                    <header class="uk-comment-header">

                        <img class="uk-comment-avatar uk-border-circle" width="50" height="50" src="{{ comment.user_image }}">

                        <h4 class="uk-comment-title">{{ comment.user_name }} {% if comment.user_id==blog.user_id %}(作者){% endif %}</h4>

                        <p class="uk-comment-meta">{{ comment.created_at|datetime }}</p>

                    </header>

                    <div class="uk-comment-body">

                        {{ comment.html_content|safe }}

                    </div>

                </article>

            </li>

            {% else %}

            <p>还没有人评论...</p>

            {% endfor %}

        </ul>



    </div>



    <div class="uk-width-medium-1-4">

        <div class="uk-panel uk-panel-box">

            <div class="uk-text-center">

                <img class="uk-border-circle" width="120" height="120" src="{{ blog.user_image }}">

                <h3>{{ blog.user_name }}</h3>

            </div>

        </div>

        <div class="uk-panel uk-panel-header">

            <h3 class="uk-panel-title">友情链接</h3>

            <ul class="uk-list uk-list-line">

                <li><i class="uk-icon-link"></i> <a href="#">编程</a></li>

                <li><i class="uk-icon-link"></i> <a href="#">思考</a></li>

                <li><i class="uk-icon-link"></i> <a href="#">读书</a></li>

            </ul>

        </div>

    </div>



{% endblock %}